<template>
	<view class="fanyi-container white">
		<cu-custom :bgColor="'bg-' + background + '-gradient'" :isBack="true" url="../index/index">
			<block slot="backText">返回</block>
			<block slot="content">在线翻译</block>
		</cu-custom>
		<view class="fanyi-content">
			<view class="language-list">
				<picker @change="changeFrom" :value="params.fromType" :range="fromOption.map(item => item.label)">
					<view class="language-item-title">
						{{ fromOption[params.fromType].label }}
						<text class="text-gray language-item-icon cuIcon-triangledownfill"></text>
					</view>
				</picker>
				<text class="iconfont icon-order order"></text>
				<picker @change="changeTo" :value="params.toType" :range="toOption.map(item => item.label)">
					<view class="language-item-title">
						{{ toOption[params.toType].label }}
						<text class="text-gray language-item-icon cuIcon-triangledownfill"></text>
					</view>
				</picker>
			</view>
			<view class="from-content">
				<textarea v-model="params.content" maxlength="-1" class="text-content" placeholder="请输入要翻译的单词或句子" @input="handleQuery"></textarea>
				<text class="text-gray close cuIcon-roundclosefill" v-show="params.content" @click.self="handleClear()"></text>
			</view>
			<button class="cu-btn block margin-tb-sm lg" :class="'bg-' + background + '-gradient'" :loading="loading" :disabled="!params.content" @click="handleQuery">点击翻译</button>
			<view class="from-content" v-show="params.toContent">
				<textarea v-model="params.toContent" disabled maxlength="-1" class="text-content"></textarea>
				<view class="operation">
					<view @click="handleCopy">
						复制
						<text class="lg text-gray cuIcon-copy icon"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { debounce, getBaiduQuery } from '@/utils/index.js';
import { getLangdetect, getResult } from '@/api/fanyi.js';
export default {
	data() {
		return {
			background: '',
			params: {
				content: '',
				toContent: '',
				fromType: 0,
				toType: 0
			},
			fromOption: [
				{ label: '自动检测', value: '0' },
				{ label: '中文', value: 'zh' },
				{ label: '英语', value: 'en' },
				{ label: '韩语', value: 'kor' },
				{ label: '日语', value: 'jp' }
			],
			toOption: [{ label: '英语', value: 'en' }, { label: '中文', value: 'zh' }, { label: '韩语', value: 'kor' }, { label: '日语', value: 'jp' }],
			handleQuery: null,
			loading: false
		};
	},
	onLoad(e) {
		this.background = e.background;
		this.handleQuery = debounce(() => {
			this.handlerSearch();
		}, 200);
	},
	methods: {
		handleClear() {
			this.params.content = '';
			this.params.toContent = '';
		},

		//修改要转换成的语言
		changeFrom(event) {
			this.params.fromType = event.detail.value;
			this.handlerSearch();
		},

		//修改要转换成的语言
		changeTo(event) {
			this.params.toType = event.detail.value;
			this.handlerSearch();
		},

		async handlerSearch() {
			if (!this.params.content) {
				return;
			}
			this.loading = true;
			let from = this.fromOption[this.params.fromType].value;
			let to = this.toOption[this.params.toType].value;
			if (this.params.fromType == 0) {
				//自动检测
				from = await this.getFromLang();
			}
			let obj = getBaiduQuery(this.params.content);
			const { data } = await getResult({
				...obj,
				q: this.params.content,
				from,
				to
			});
			if (data.trans_result) {
				this.params.toContent = data.trans_result[0].dst;
			} else {
				this.showError();
			}
			this.loading = false;
		},

		//自动检测当前输入的语言
		getFromLang() {
			return new Promise((resolve, reject) => {
				getLangdetect({ query: this.params.content })
					.then(res => {
						if (res.data.msg === 'success') {
							resolve(res.data.lan);
						} else {
							reject();
							this.showError();
						}
					})
					.catch(() => {
						reject();
						this.showError();
					})
					.finally(() => {
						this.loading = false;
					});
			});
		},

		showError() {
			uni.showToast({
				icon: 'none',
				title: '网络错误'
			});
		},
		
		handleCopy() {
			uni.setClipboardData({
				data: this.params.toContent,
				success: () => {
					uni.showToast({
						title: '复制成功'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.fanyi-container {
	height: 100vh;
	.fanyi-content {
		padding: 0 15px;
		box-sizing: border-box;
		.language-list {
			display: flex;
			justify-content: center;
			margin-top: 15px;
			align-items: center;
			.order {
				font-size: 42rpx;
				margin: 0 11% 0 calc(11% - 3px);
				transform: rotate(90deg);
			}
			.language-item-title {
				font-size: 32rpx;
				font-weight: 600;
				.language-item-icon {
					font-size: 20px;
					font-weight: normal;
				}
			}
		}
		.from-content {
			position: relative;
			.text-content {
				margin-top: 20px;
				background: rgb(239, 239, 239);
				border-radius: 8px;
				box-sizing: border-box;
				padding: 20px;
				width: 100%;
				min-height: 130px;
			}
			.close {
				position: absolute;
				bottom: 5px;
				right: 6px;
				font-size: 18px;
				z-index: 30;
			}
			.operation {
				display: flex;
				justify-content: center;
				margin-top: 25px;
				font-size: 32rpx;
				color: #3078e6;
				font-weight: bold;
				.icon {
					margin-left: 3px;
					color: #3078e6;
				}
			}
		}
	}
}
</style>
